﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Tag="Animation: Border and Rectangle Color and Opacity">
<UserControl.Resources>
    <Style TargetType="{x:Type StackPanel}">
        <Setter Property="Margin" Value="4" />
    </Style>
    <Style x:Key="ExplicitSizeStyle" TargetType="{x:Type FrameworkElement}">
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Height" Value="64" />
        <Setter Property="Width" Value="96" />
    </Style>
    <Style x:Key="BorderBackgroundAnimationStyle" TargetType="{x:Type Border}" BasedOn="{StaticResource ExplicitSizeStyle}">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Border.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation
                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                AutoReverse="False"
                                Duration="0:0:0.3" To="Blue"
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Border.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation
                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                AutoReverse="False"
                                Duration="0:0:0.3" To="Red"
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="OpacityAnimationStyle" TargetType="{x:Type FrameworkElement}" BasedOn="{StaticResource ExplicitSizeStyle}">
        <Style.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="(FrameworkElement.Opacity)"
                                AutoReverse="False"
                                Duration="0:0:0.3" To="1"
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="FrameworkElement.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetProperty="(FrameworkElement.Opacity)"
                                AutoReverse="False"
                                Duration="0:0:0.3" To="0.25"
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="RectangleFillAnimationStyle" TargetType="{x:Type Rectangle}" BasedOn="{StaticResource ExplicitSizeStyle}">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation
                                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                AutoReverse="False"
                                Duration="0:0:0.3" To="Blue"
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Rectangle.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation
                                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                AutoReverse="False"
                                Duration="0:0:0.3" To="Red"
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
<!--
    In this example, we “dot down” with Storyboard.TargetProperty
    to reach the animatable properties of the Storyboard Target.
    
    “How to: Animate the Color or Opacity of a SolidColorBrush”
    [http://msdn.microsoft.com/en-us/library/ms753266(v=vs.110).aspx]
    
    “How to: Animate in a Style”
    [http://msdn.microsoft.com/en-us/library/ms748266(v=vs.110).aspx]
-->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Horizontal">
        <Label Content="Border Background:" />
        <Border Background="Red" Style="{StaticResource BorderBackgroundAnimationStyle}" />
    </StackPanel>
    <StackPanel Grid.Row="1" Orientation="Horizontal">
        <Label Content="Border Opacity:" />
        <Border Background="Red" Opacity="0.25" Style="{StaticResource OpacityAnimationStyle}" />
    </StackPanel>
    <StackPanel Grid.Row="2" Orientation="Horizontal">
        <Label Content="Rectangle Fill:" />
        <Rectangle Fill="Red" Style="{StaticResource RectangleFillAnimationStyle}" />
    </StackPanel>
    <StackPanel Grid.Row="3" Orientation="Horizontal">
        <Label Content="Rectangle Opacity:" />
        <Rectangle Fill="Red" Opacity="0.25" Style="{StaticResource OpacityAnimationStyle}" />
    </StackPanel>
</Grid>
</UserControl>
